<template>
<view class="content">
	<view class="herder">
		<view class="dizi">
		<view class="addre">{{addressmini}}
		<text class="iconfont icon-xiala"></text>
		</view>
		<view class="frame">
			<image src="../../static/Frame.png"></image>
			<text style="color:#025E21;margin-right: 4rpx;">送货上门 </text>
		</view>
		</view>
		<view class="haoc"><image src="../../static/haoc.png"></image></view>
	</view>
		<scroll-view class="classlist" scroll-x="true">
			<view class="boxmini" v-for="item in title" :key="item.id" 
			  @click="changeBackgroundColor(item.id)"
			 :style="{ backgroundColor: getItemBackgroundColor(item.id) }">
				<image :src="item.pic"></image>
				<text>{{item.cate_name}}</text>
			</view>
		</scroll-view>
		<scroll-view class="listy" scroll-y="true" lower-threshold="20" @scrolltolower='renew'>
			<CommoDity ref="delson" :productlist="productlist"></CommoDity>
			<u-loadmore :status="status" />
		</scroll-view>
	<FooterNavigation></FooterNavigation>
</view>
</template>

<script>
	import CommoDity from '../../components/commodity.vue'
	import http from '@/utils/http.js'
	import {getproduct,getcalss} from '@/api/commodity.js'
	import { createLogger } from 'vuex'
	export default {
		components:{
			CommoDity
		},
		data() {
			return {
				addressmini:'',
				title:[],
				productlist:[],
				formd:{
					cate_id:40,
					page:1,
					limit:10,
					cate_type:2
				},
				count:null,
				status:'loadmore',
				selectedItemId: null // 记录被选中元素的id
			}
		},
		onShow() {
			this.addressmini = getApp().globalData.addressmini || '内江市'
		},
		methods: {
			// 商品分类
			async assortapi(){
				const res = await getcalss(54)
				this.title = res.data
			},
			// 商品列表
			async productapi(data){
				const res = await getproduct(data)
				this.productlist.push(...res.data.list)
				this.count = res.data.count
			},
			renew(){
				if(this.count>this.productlist.length){
					this.status = 'loading'
					this.formd.page++
					this.productapi(this.formd)
					this.status = 'loadmore'
				}else{
					this.status = 'nomore'
				}
			},
			async changeBackgroundColor(id) {
				  this.$refs.delson.remove()
				  this.selectedItemId = id;
				  this.formd.cate_id = id;
				  this.formd.page = 1
				  const res = await getproduct(this.formd)
				  this.productlist = res.data.list
				  this.count = res.data.count
				  this.count > this.productlist.length ? this.status = 'loadmore' : this.status = 'nomore'
				  this.$forceUpdate()
			},
			 getItemBackgroundColor(id) {
			  if (id === this.selectedItemId) {
				return '#FAFAFA';
			  } else {
				return '#fdfdfd';
			  }
			}
		},
		onLoad() {
			this.assortapi()
			this.productapi(this.formd)
		}
	}
</script>

<style lang="less">
.content{
	padding: 0 40rpx;
	display: flex;
	flex-direction: column;
	height: 100vh;
	}
.herder{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 60rpx;
	margin-top:103rpx ;
	.dizi{
		.addre{
			font-size: 36rpx;
			margin-bottom: 10rpx;
		}
		.frame{
			  display: flex;
			  align-items: center;
			image{
				width: 44rpx;
				height: 44rpx;
				margin-top: 4rpx;
			}
			text{
				font-size: 20rpx;
			}
		}
	}
	.haoc{
		image{
		width: 172rpx;
		height: 172rpx;
		}
	}
}
.classlist{
	width: 100%;
	height: 154rpx;
	white-space: nowrap;
	padding-bottom: 20rpx;
	.boxmini{
		width: 153rpx;
		height: 153rpx;
		border-radius: 20rpx;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		image{
			width: 80rpx;
			height: 80rpx;
		}
		text{
			font-size: 24rpx;
		}
	}
}
.listy{
	margin-top: 20rpx;
	height: 1200rpx;
}
</style>
